<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>任务管理</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
    <meta name="referrer" content="no-referrer"/>
</head>

<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="role-table" lay-filter="role-table"></table>
    </div>
</div>

<script type="text/html" id="user-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>

<script type="text/html" id="server-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'common','upload'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let upload = layui.upload;

        $.ajaxSetup({
            xhrFields: {
                withCredentials: true
            },
        });
        table.render({
            elem: '#role-table',
            url: '/system/task/json',
            page: true,
            cols: [
                [
                    {field: 'id', title: 'ID',width:75, align: 'center', sort: true},
                    {field: '', title: '任务类型', align: 'center', sort: true,templet: function(res){
                            if(res.source_type == 1 && res.dst_type == 2){
                                return '<span class="pear-btn pear-btn-warming pear-btn-xs">本地</span> <i class="layui-icon layui-icon-triangle-r"></i> <span class="pear-btn pear-btn-danger pear-btn-xs">云端</span>'
                            }else if(res.source_type == 2 && res.dst_type == 1){
                                return '<span class="pear-btn pear-btn-danger pear-btn-xs">云端</span> <i class="layui-icon layui-icon-triangle-r"></i> <span class="pear-btn pear-btn-warming pear-btn-xs">本地</span>'
                            }else if(res.source_type == 2 && res.dst_type == 2){
                                return '<span class="pear-btn pear-btn-danger pear-btn-xs">云端</span> <i class="layui-icon layui-icon-triangle-r"></i> <span class="pear-btn pear-btn-danger pear-btn-xs">云端</span>'
                            }
                        }},
                    {field: 'source_path', title: '源地址', align: 'center', sort: true},
                    {field: 'dst_path', title: '目标地址', align: 'center', sort: true},
                    {field: 'task_file_num', title: '文件数量', align: 'center', sort: true,templet: function(res){
                           return res.task_log_num + " / " + res.task_file_num
                        }},
                    {field: 'create_time', title: '创建时间', align: 'center', sort: true}
                    // {title: '操作', toolbar: '#server-bar', align: 'center', width: 140}
                ]
            ],
            skin: 'line',
            toolbar: '#user-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
        });

        table.on('tool(role-table)', function(obj) {
            if (obj.event === 'remove') {
                window.del(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('toolbar(role-table)', function(obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        form.on('submit(user-query)', function(data) {
            table.reload('role-table', {
                where: data.field
            })
            return false;
        });

        window.add = function() {
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: [common.isModile() ? '100%' : '800px', common.isModile() ? '100%' : '600px'],
                content: '/system/task/add'
            });
        }

        window.edit = function(obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: [common.isModile() ? '100%' : '800px', common.isModile() ? '100%' : '600px'],
                content: '/system/task/edit/?id=' + obj.data["id"]
            });
        }

        window.del = function(obj) {
            layer.confirm('删除此服务器配置？', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load(2, { shade: [0.35, '#ccc'] });
                $.ajax({
                    url: "/system/task/del",
                    data: {id: obj.data['id']},
                    dataType: 'json',
                    type: 'POST',
                    success: function(result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function() {
                                window.refresh();
                            });
                        } else {
                            layer.close(loading);
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.refresh = function(param) {
            table.reload('role-table');
        }
    })
</script>
</body>

</html>